<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/img/logo.png"/>
    <title>启慧信息技术公司人事管理系统</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/mmss.css"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<section>
    <div class="container">
        <div class="row ">
            <div class="col-xs-12">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="/main"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">考勤管理</li>
                    <li class="active">考勤信息</li>
                </ol>
                <!--顶部搜索栏开始,按照指定的条件进行搜索-->
                <form th:action="@{/attend/list}">
                    <div class="input-group line left">
                        <span class="input-group-addon" id="basic-addon2">
                            <span class="glyphicon glyphicon-search">
                            </span>
                        </span>

                        <input name="searchContent" type="text" class="form-control" placeholder="输入关键字搜索" aria-describedby="basic-addon2">
                    </div>
                    <select name = "option" class="form-control line left">
                        <option value="attend_id">出勤id</option>
                        <option value="user_id">员工id</option>
                        <option value="name">员工姓名</option>
                        <option value="attend_time">出勤日期</option>
                        <option value="work_time">上班时间</option>
                        <option value="quit_time">下班时间</option>
                        <option value="attend_state">出勤状态</option>


                    </select>

                    <button shiro:hasPermission="attend:search" type="submit" class=" btn btn-primary ">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                    <button >
                        <a shiro:hasPermission="attend:add"
                           class="btn btn-success btn-sm" data-toggle="modal" data-target="#add1">上班打卡</a>
                    </button>
                    <br> <br>


                </form>
                <br>
                <!--顶部搜索栏结束-->
                <!--table表用来显示数据-->
                <table class="table table-bordered  table-condensed table-striped text-center bg-info">
                    <!--表头信息开始-->
                    <thead>
                        <tr class="info">
                            <th class="text-center">考勤id</th>  <!--0-->
                            <th class="text-center">用户id</th>  <!--0-->
                            <th class="text-center">员工姓名</th>
                            <th class="text-center">考勤日期</th>  <!--1-->
                            <th class="text-center">上班时间</th> <!--2-->
                            <th class="text-center">下班时间</th> <!--3-->
                            <th class="text-center">考勤状态</th> <!--4-->
                            <th class="text-center">考勤结果</th> <!--5-->
                            <th class="text-center">操作</th> <!--5-->
                        </tr>
                    </thead>
                    <!--表头信息结束-->
                    <!--表数据开始-->
                    <tbody>
                        <!--输出封装在model中的pageInfo数据-->
                        <tr th:each="attend:${pageInfo.getResult()}">
                            <td th:text="${attend.attendId}"></td>
                            <td th:text="${attend.userId}"></td>
                            <td>
                                <div th:each="User:${attend.getUser()}" th:text="${User.getName()}"></div>
                            </td>
                            <td th:text="${attend.attendTime}"></td><!--2-->
                            <td th:text="${attend.workTime}"></td><!--3-->
                            <td th:text="${attend.quitTime!=null?attend.quitTime:''}"></td><!--4-->
                            <td th:text="${attend.attendState}"></td><!--5-->
                            <td th:text="${attend.result}"></td><!--5-->
                            <td>

                                <a  shiro:hasPermission="attend:edit"
                                  class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit" onclick="edit(this)">下班打卡</a>

                                <a shiro:hasPermission="attend:del"
                                   class="btn btn-warning btn-sm"  th:onclick="|delAttend(${attend.attendId})|">删除考勤记录</a>
                            </td>
                            <!--模态框开始-->
                            <!--添加模态框开始-->
                                <div class="modal fade" id="add1" tabindex="-1" role="dialog"  aria-labelledby="add11">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="add11">上班打卡</h4>
                                            </div>
                                            <form th:action="@{/attend/add}" method="post">
                                                <div class="modal-body">
                                                    <ul>
                                                        <li class="form-inline">
                                                            <label><span>用户Id</span></label>
                                                            <input type="text" name="userId" />
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>上班时间</span></label>
                                                            <input type="datetime-local" name="workTime"/>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <!--模态框底部的取消和保存按钮-->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                        取消
                                                    </button>
                                                    <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            <!--添加模态框结束-->
                            <!--修改模态框开始-->
                            <div class="modal fade" id="edit" tabindex="-1" role="dialog"  aria-labelledby="edit">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="edit11">下班打卡</h4>
                                        </div>
                                        <form th:action="@{/attend/edit}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li class="form-inline" hidden="hidden">
                                                        <label><span>考勤Id</span></label>
                                                        <input type="hidden" name="attendId" id="attendId" />
                                                    </li>
                                                    <li class="form-inline" hidden="hidden">
                                                        <label><span>用户Id</span></label>
                                                        <input type="hidden" name="userId" id="userId1" />
                                                    </li>
                                                    <!--<li class="form-inline" >
                                                        <label><span>员工姓名</span></label>
                                                        <input type="text" readonly name="name" id="name" />
                                                    </li>-->
                                                    <li class="form-inline">
                                                        <label><span>下班时间</span></label>
                                                        <input type="datetime-local" name="quitTime"/>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--模态框底部的取消和保存按钮-->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--修改模态框结束-->
                            <!--模态框结束-->

                        </tr>
                    </tbody>
                    <!--表数据开始-->
                </table>
                <!--分页-->
                <ul class="pagination right">
                    <div>
                        当前第 [[${pageInfo.pageNum}]]页，共 [[${pageInfo.pages}]] 页， 共 [[${pageInfo.total}]] 条记录
                    </div>
                    <!--上一页按钮-->
                    <li th:class="${pageInfo.getPageNum()<=1 ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()<=1}" onclick="return checkDisable(this)" href="#" th:href="@{/attend/list(pageNum=${pageInfo.getPageNum()-1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}"  aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>

                    <li th:class="${pageInfo.getPageNum()==1 ? 'active' :''}"><a href="#" th:href="@{/attend/list(pageNum=1,pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}">1</a></li>

                    <li ><a href="#">...</a></li>

                    <li th:if="${pageInfo.getPageNum()!=1 and pageInfo.getPageNum()!=pageInfo.getPages()}" th:class="active"><a href="#" th:text="${pageInfo.getPageNum()}"><span class="sr-only"></span></a></li>

                    <li ><a href="#">...</a></li>

                    <li th:class="${pageInfo.getPageNum()==pageInfo.getPages() ? 'active' :''}"><a href="#" th:href="@{/attend/list(pageNum=${pageInfo.getPages()},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" th:text="${pageInfo.getPages()}"></a></li>
                    <!--下一页按钮-->
                    <li th:class="${pageInfo.getPageNum()>=pageInfo.getPages() ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()>=pageInfo.getPages()}" onclick="return checkDisable(this)"  href="#" th:href="@{/attend/list(pageNum=${pageInfo.getPageNum()+1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                    </li>


                </ul>
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>
</body>
</html>

<script src="/static/js/jquery-1.11.3.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script>
    function checkDisable(obj){
        var attr = $(obj).attr("disabled");
        return attr !== "disabled";
    }
    function delAttend(attendId){
        if(confirm("您确定要删除该条记录吗?")){
            $.ajax({
                url: "/attend/del?attendId="+attendId,
                type:"post"
            })
        }

    }

    //修改模态框数据的回显
    function edit(ob){
        var aDate = $(ob).parent().parent().find("td");
        console.log(aDate.eq(0).text());
       $("#attendId").val(aDate.eq(0).text());
       $("#userId1").val(aDate.eq(1).text());
     /*   $("#name").val(aDate.eq(2).text());*/
    }





</script>